<template>
    <div>
      <!--头部 开始-->
      <div class="transparent fix">
        <div class="transparentBg"></div>
        <div class="transparentCon">
          <a href="javascript:history.go(-1);" class="returnBtn"></a>
          <span></span>
          <a href="#" class="shareBtn"></a>
        </div>
      </div>
      <!--头部 结束-->
      <!--中间 开始-->
      <main>
        <div class="dynamic topicMain">
          <div class="catcherHead">
            <img src="../../images/threeLevel/recommendImg.jpg">
            <div class="topicCon">
              <h3>#6.26爆款#</h3>
              <span>39条动态</span>
            </div>
          </div>
          <div class="lookMore">
            <div class="upText">
              <em class="setTop">置顶</em>
              <p class="firstText">
                <span>&nbsp;三只松鼠股份有限公司成立于2012年，是中国第一家定位于纯互联网食品品牌的企业，也是当前中国销售规模最大的食品电商企业。“三只松鼠”品牌一经推出，立刻受到了风</span>
              <span>三只松鼠股份有限公司成立于2012年，是中国第一家定位于纯互联网食品品牌的企业，也是当前中国销售规模最大的食品电商企业。“三只松鼠”品牌一经推出，立刻受到了风</span>
              <span>三只松鼠股份有限公司成立于2012年，是中国第一家定位于纯互联网食品品牌的企业，也是当前中国销售规模最大的食品电商企业。“三只松鼠”品牌一经推出，立刻受到了风</span>
              </p>
            </div>
            <div class="upBtn">展开查看</div>
          </div>
          <div class="topicDetail" id="navcon01">
            <div class="topiTitle"  id="box_nav">
              <div class="titleLeft">
                <span>综合排序</span>
                <em></em>
              </div>
              <div class="titleRight">
                <a href="javascript:void(0);" class="Cur">动态</a>
                <a href="javascript:void(0);">商品</a>
              </div>
            </div>
            <div class="tabList">
              <div class="tabListInfo" style="display: block;">
                <div class="infoContent">
                  <div class="infoHead">
                    <div class="infoHeadLeft">
                      <div class="headPic"><a href="personalHomePage.html"><img src="../../images/temporary/7.jpg"></a></div>
                      <div class="headName">
                        <p>环球小荐人</p>
                        <em>12小时前发布</em>
                      </div>
                    </div>
                    <a  href="javascript:void(0);" class="infoHeadRight">...</a>
                  </div>
                  <div class="infoText">
                    <em class="topicTit">#6.26爆款#</em><p>法式轻奢ELLE箱包专场，会员最高可省92.7元！霍思燕同款斜挎包会员价679.9元，牛皮百搭斜挎包会员价223.7元，U型开口斜挎包会员价298.5元，精致简约铆钉小方包会员价276元，快来进场为自己挑选一只心仪的包包吧~</p>
                  </div>
                  <!--缩略图-->
                  <div id="_contain" class="enlargementPic">
                    <div class="contain">
                      <div class="containContent">
                        <div class="text">
                          <div class="my-gallery" data-pswp-uid="2">
                            <figure>
                              <div><a ><img  src="../../images/temporary/5.jpg" preview="5"></a></div>
                            </figure>
                            <figure>
                              <div><a ><img src="../../images/temporary/sb1.jpg" preview="5"></a></div>
                            </figure>
                            <figure>
                              <div><a ><img src="../../images/temporary/s5.jpg" preview="5"></a></div>
                            </figure>
                            <figure>
                              <div><a ><img  src="../../images/temporary/2.jpg" preview="5"></a></div>
                            </figure>
                            <figure>
                              <div><a ><img src="../../images/temporary/sb3.jpg" preview="5"></a></div>
                            </figure>
                            <figure>
                              <div><a ><img src="../../images/temporary/sb1.jpg" preview="5"></a></div>
                            </figure>
                            <figure>
                              <div><a ><img  src="../../images/temporary/sb1.jpg" preview="5"></a></div>
                            </figure>
                            <figure>
                              <div><a ><img src="../../images/temporary/sb1.jpg" preview="5"></a></div>
                            </figure>
                            <figure>
                              <div><a ><img src="../../images/temporary/sb1.jpg" preview="5"></a></div>
                            </figure>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="secialField">
                    <a href="#">
                      <div class="secialPic"><img src="../../images/temporary/2.jpg"></div>
                      <p>法式轻奢ELLE箱包专场</p>
                    </a>
                  </div>
                  <div class="operation">
                    <a href="#"><em class="fabulous"></em><span>6</span></a>
                    <a href="#"><em class="download"></em><span>下载</span></a>
                    <a href="#"><em class="share"></em><span>15</span></a>
                  </div>
                </div>
                <div class="infoContent">
                  <div class="infoHead">
                    <div class="infoHeadLeft">
                      <div class="headPic"><img src="../../images/temporary/7.jpg"></div>
                      <div class="headName">
                        <p>环球小荐人</p>
                        <em>12小时前发布</em>
                      </div>
                    </div>
                    <a  href="javascript:void(0);" class="infoHeadRight">...</a>
                  </div>
                  <div class="infoText">
                    <em class="topicTit">#6.26爆款#</em><p>法式轻奢ELLE箱包专场，会员最高可省92.7元！霍思燕同款斜挎包会员价679.9元，牛皮百搭斜挎包会员价223.7元，U型开口斜挎包会员价298.5元，精致简约铆钉小方包会员价276元，快来进场为自己挑选一只心仪的包包吧~</p>
                  </div>
                  <!--缩略图-->
                  <div id="" class="enlargementPic">
                    <div class="contain">
                      <div class="containContent">
                        <div class="text">
                          <div class="my-gallery" data-pswp-uid="2">
                            <figure>
                              <div><a ><img  src="../../images/temporary/5.jpg" preview="6"></a></div>
                            </figure>
                            <figure>
                              <div><a ><img src="../../images/temporary/sb1.jpg" preview="6"></a></div>
                            </figure>
                            <figure>
                              <div><a ><img src="../../images/temporary/s5.jpg" preview="6"></a></div>
                            </figure>
                            <figure>
                              <div><a ><img  src="../../images/temporary/2.jpg" preview="6"></a></div>
                            </figure>
                            <figure>
                              <div><a ><img src="../../images/temporary/sb3.jpg" preview="6"></a></div>
                            </figure>
                            <figure>
                              <div><a ><img src="../../images/temporary/sb1.jpg" preview="6"></a></div>
                            </figure>
                            <figure>
                              <div><a ><img  src="../../images/temporary/sb1.jpg" preview="6"></a></div>
                            </figure>
                            <figure>
                              <div><a ><img src="../../images/temporary/sb1.jpg" preview="6"></a></div>
                            </figure>
                            <figure>
                              <div><a ><img src="../../images/temporary/sb1.jpg" preview="6"></a></div>
                            </figure>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="secialField">
                    <a href="#">
                      <div class="secialPic"><img src="../../images/temporary/2.jpg"></div>
                      <p>法式轻奢ELLE箱包专场</p>
                    </a>
                  </div>
                  <div class="operation">
                    <a href="#"><em class="fabulous"></em><span>6</span></a>
                    <a href="#"><em class="download"></em><span>下载</span></a>
                    <a href="#"><em class="share"></em><span>15</span></a>
                  </div>
                </div>
                <div class="infoContent">
                  <div class="infoHead">
                    <div class="infoHeadLeft">
                      <div class="headPic"><img src="../../images/temporary/7.jpg"></div>
                      <div class="headName">
                        <p>环球小荐人</p>
                        <em>12小时前发布</em>
                      </div>
                    </div>
                    <a  href="javascript:void(0);" class="infoHeadRight">...</a>
                  </div>
                  <div class="infoText">
                    <em class="topicTit">#6.26爆款#</em><p>法式轻奢ELLE箱包专场，会员最高可省92.7元！霍思燕同款斜挎包会员价679.9元，牛皮百搭斜挎包会员价223.7元，U型开口斜挎包会员价298.5元，精致简约铆钉小方包会员价276元，快来进场为自己挑选一只心仪的包包吧~</p>
                  </div>
                  <!--缩略图-->
                  <div  class="enlargementPic">
                    <div class="contain">
                      <div class="containContent">
                        <div class="text">
                          <div class="my-gallery" data-pswp-uid="2">
                            <figure>
                              <div><a><img  src="../../images/temporary/5.jpg" preview="7"></a></div>
                            </figure>
                            <figure>
                              <div><a><img src="../../images/temporary/sb1.jpg" preview="7"></a></div>
                            </figure>
                            <figure>
                              <div><a ><img src="../../images/temporary/s5.jpg" preview="7"></a></div>
                            </figure>
                            <figure>
                              <div><a ><img  src="../../images/temporary/2.jpg" preview="7"></a></div>
                            </figure>
                            <figure>
                              <div><a ><img src="../../images/temporary/sb3.jpg" preview="7"></a></div>
                            </figure>
                            <figure>
                              <div><a ><img src="../../images/temporary/sb1.jpg" preview="7"></a></div>
                            </figure>
                            <figure>
                              <div><a ><img  src="../../images/temporary/sb1.jpg" preview="7"></a></div>
                            </figure>
                            <figure>
                              <div><a ><img src="../../images/temporary/sb1.jpg" preview="7"></a></div>
                            </figure>
                            <figure>
                              <div><a ><img src="../../images/temporary/sb1.jpg" preview="7"></a></div>
                            </figure>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="secialField">
                    <a href="#">
                      <div class="secialPic"><img src="../../images/temporary/2.jpg"></div>
                      <p>法式轻奢ELLE箱包专场</p>
                    </a>
                  </div>
                  <div class="operation">
                    <a href="#"><em class="fabulous"></em><span>6</span></a>
                    <a href="#"><em class="download"></em><span>下载</span></a>
                    <a href="#"><em class="share"></em><span>15</span></a>
                  </div>
                </div>
                <a href="#" class="participation">参与话题</a>
              </div>
              <div class="tabListInfo">
                <div class='shappArray'>
                  <a href="#" class="shapplist">
                    <div class="infoPic"><img src="../../images/temporary/commodity12.png"></div>
                    <p>【任选】【百草味-手剥小白杏200g】坚果干果</p>
                    <div class="price">
                      <span class="presentNum">￥<em>19</em>.9</span>
                      <span class="membershipNum">￥<em>19</em>.9 <i>会员价</i></span>
                    </div>
                    <div class="discount">
                      <span class="limit">限时直降</span>
                    </div>
                  </a>
                  <a href="#" class="shapplist">
                    <div class="infoPic"><img src="../../images/temporary/commodity12.png"></div>
                    <p>【任选】【百草味-手剥小白杏200g】坚果干果</p>
                    <div class="price">
                      <span class="presentNum">￥<em>19</em>.9</span>
                      <span class="membershipNum">￥<em>19</em>.9 <i>会员价</i></span>
                    </div>
                    <div class="discount">
                      <span class="limit">限时直降</span>
                    </div>
                  </a>
                  <a href="#" class="shapplist">
                    <div class="infoPic"><img src="../../images/temporary/commodity12.png"></div>
                    <p>【任选】【百草味-手剥小白杏200g】坚果干果</p>
                    <div class="price">
                      <span class="presentNum">￥<em>19</em>.9</span>
                      <span class="membershipNum">￥<em>19</em>.9 <i>会员价</i></span>
                    </div>
                    <div class="discount">
                      <span class="limit">限时直降</span>
                    </div>
                  </a>
                  <a href="#" class="shapplist">
                    <div class="infoPic"><img src="../../images/temporary/commodity12.png"></div>
                    <p>【任选】【百草味-手剥小白杏200g】坚果干果</p>
                    <div class="price">
                      <span class="presentNum">￥<em>19</em>.9</span>
                      <span class="membershipNum">￥<em>19</em>.9 <i>会员价</i></span>
                    </div>
                    <div class="discount">
                      <span class="limit">限时直降</span>
                    </div>
                  </a>
                </div>
                <a href="#" class="participation">参与话题</a>
              </div>
            </div>
            <!--综合排序下拉 开始-->
            <div class="dropDownBox">
              <div class="blackBag"></div>
              <div class="boxContent">
                <a href="#" class="Cur">综合排序</a>
                <a href="#">按时间排序</a>
                <a href="#">按热度排序</a>
              </div>
            </div>
            <!--综合排序下拉 结束-->
          </div>
        </div>
      </main>

    </div>
</template>

<script>
  import $ from 'jquery'
  import Vue from 'vue'
  import vuePhotoPreview from 'vue-photo-preview'
  import 'vue-photo-preview/dist/skin.css'
  import {TouchSlide} from '../../js/plugins/TouchSlide.1.1.min'
  import Swiper from 'swiper'
  var options={
    fullscreenEl:false //关闭全屏按钮
  }
  Vue.use(vuePhotoPreview,options)

  export default {
        name: "topic",
    components:{
      TouchSlide,
      Swiper
    },
    methods:{
      /*话题 tab切换*/
    topicTab:function (){
    let $li = $('.titleRight a');
    let $ul = $('.tabList .tabListInfo');
    $("#navcon01").css('height',$ul.eq(0).height())
    $li.click(function(e){
      console.log(e)
      var $this = e;
      var $t = $this.index();
      $li.removeClass();
      $this.addClass('Cur');
      $ul.css('display','none');
      $ul.eq($t).css('display','block');
      $("#navcon01").css('height',$ul.eq($t).height())
    })
  },
      /*综合排序*/
      sort: function (){
    $(".topiTitle .titleLeft").on("click",function(){
      $("body").css({"height":"100%","overflow":"hidden"})
      $(".dropDownBox").show();
    });
    $(".dropDownBox .blackBag").on("click",function(){
      $("body").css({"height":"auto","overflow":"auto"})
      $(".dropDownBox").hide();
    })
  }
    },

      mounted:function () {
        this.sort()
        this.topicTab()
        $(window).scroll(function(){
          var $scrolltop=document.documentElement.scrollTop||document.body.scrollTop;
          var $tabScroll=$(".transparent").offset().top-200;
          if($scrolltop>=$tabScroll){
            $(".transparent .transparentBg").css({"opacity":"1"});
            $(".transparentCon span").text("#6.26 爆款#")
            if($tabScroll<0){
              $(".transparent .transparentBg").css({"opacity":"0"});
              $(".transparentCon span").text("")
            }
          };

          var $scrolltop2=document.documentElement.scrollTop||document.body.scrollTop;
          var $tabScroll2=$("#box_nav").offset().top-90;
          if($scrolltop2>=$tabScroll2){
            $("#box_nav").addClass("fix")
            if($tabScroll<90){
              $("#box_nav").removeClass("fix")
            }
          }

        })
      }
    }
</script>

<style scoped>
@import "../../css/common/common.css" ;
@import "../../css/plugins/swiper.min.css" ;
@import "../../css/plugins/iconfont.css" ;
@import "../../css/plugins/default-skin/default-skin.css" ;
@import "../../css/other/index.css";
</style>
